<template>
  <div id="center" :style="{marginTop:select === 1 ? '-74px': '-20px'}">
    <div class="map_bg">
      <svgaVuePlayer
          id="svgaplayer_map"
          :src="('/static/frames/map.svga')"
      ></svgaVuePlayer>
    </div>
    <div class="btn">
      <div class="btn1" @click="onClick(1)">
        <img v-if="mapType === 1" src="@/assets/img/btn_s_1.png">
        <img v-else src="@/assets/img/btn_2.png">
        战区
      </div>
      <div class="btn1" @click="onClick(2)">
        <img v-if="mapType === 2" src="@/assets/img/btn_s_1.png">
        <img v-else src="@/assets/img/btn_2.png">
        派出所
      </div>
    </div>
    <centerChartMap :apiData="apiData" :mapType="mapType" :select="select" :timeMode="timeMode"
                    @regionClick="regionClick"></centerChartMap>
  </div>
</template>

<script>

import centerChartMap from '_c/cneter/centerChartMap/index.vue'
import svgaVuePlayer from '_c/svgaVuePlayer.vue'

export default {
  props: {
    select: {},
    mapType: {},
    apiData: {},
    timeMode: {},
  },
  created() {
  },
  data() {
    return {
      arr: {},
      frameUrls: []

    }
  },
  components: {
    svgaVuePlayer,
    centerChartMap,
  },
  methods: {
    onClick(v) {
      this.$emit('mapTypeChange', v)
    },
    regionClick(areaCode) {
      this.$emit('regionClick', areaCode)
    }
  }
}
</script>

<style lang="scss" scoped>
$box-width: 870px;
$box-height: 728px;
#center {
  width: $box-width;
  height: $box-height;
  display: flex;
  flex-direction: column;
  //background-image: url('@/assets/img/center_bg.png');
  //background-repeat: no-repeat;
  //background-size: 100%;
  //background-position: center;
  padding: 80px 62px;
  margin-top: -74px;
  margin-bottom: -92px;
  //transform: rotateX(45deg);
  position: relative;
  transition: all 0.5s;

  .map_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1072px;
    height: 830px;
  }

  .btn {
    position: absolute;
    right: 82px;
    top: 81px;

    .btn1, .btn2 {
      font-weight: 400;
      font-size: 16px;
      color: #B4D7EE;
      text-align: center;
      padding: 8px 26px;
      position: relative;
      cursor: pointer;
      z-index: 1;

      img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    &.select {
    }
  }
}
</style>
